import React, { useState, useEffect, Fragment } from "react";
import CreateAndUpdate from "./components/CreateAndUpdate";
import MenuHeader from "./components/MenuHeader";
import TableList from "./components/TableList";
import { getRequest, postRequest } from "../../utils/http";

export default function Resource() {
  const [dialogTitle, setDialogTitle] = useState("新建");
  /* 弹框状态 */
  const [visible, setVisible] = useState(false);
  const [changeData, setChangeData] = useState(null);
  const changeModalState = data => {
    data ? setDialogTitle("修改") : setDialogTitle("新增");
    data && setChangeData(data);
    setVisible(!visible);
  };
  /* 列表数据 */
  const [isUpdate, setIsUpdate] = useState(0);
  const [tableData, setTableData] = useState([]);
  const [total, setTotal] = useState(0);
  useEffect(() => {
    getRequest("/resource/count").then(data => {
      setTotal(data);
    });
    postRequest("/resource/getList", { pageIndex: 1, pageSize: 10 }).then(data => {
      setTableData(data);
    });
  }, [isUpdate]);

  return (
    <Fragment>
      <MenuHeader visible={visible} changeModalState={changeModalState} />
      <TableList
        visible={visible}
        changeModalState={changeModalState}
        tableData={tableData}
        total={total}
        setIsUpdate={setIsUpdate}
      />
      <CreateAndUpdate
        visible={visible}
        changeData={changeData}
        changeModalState={changeModalState}
        dialogTitle={dialogTitle}
        tableData={tableData}
        isUpdate={isUpdate}
        setIsUpdate={setIsUpdate}
      />
    </Fragment>
  );
}
